<template>
  <div class="container">
    <!-- 导航固定定位 fixed -->
    <van-nav-bar
      fixed
      title="搜索结果"
      left-arrow
      @click-left="$router.back()"
    />
    <van-pull-refresh
      loosing-text="手放开"
      loading-text="正在加载"
      success-text="从头再来"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <!-- 文章列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
      >
        <van-cell v-for="(item, index) in articles" :key="index">
          <div
            class="article_item"
            @click="$router.push(`/article/${item.art_id}`)"
          >
            <h3 class="van-ellipsis">
              {{ item.title }}
            </h3>
            <div class="img_box" v-if="item.cover.type">
              <van-image
                :class="item.cover.type === 1 ? 'w100' : 'w33'"
                v-for="(img, index) in item.cover.images"
                :key="index"
                fit="cover"
                :src="img"
              />
              <!-- <van-image
              class="w33"
              fit="cover"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            /> -->
            </div>
            <div class="info_box">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.collect_count }}评论</span>
              <span>{{ item.pubdate | relTime }}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { searchArticleApi } from '../../api/article'
export default {
  name: 'search-result',
  created () {
    // 初始化默认 -> 查询条件参数(不写在data中，则不是响应式的)
    this.query = {
      page: 1,
      per_page: 15,
      q: this.$route.query.q
    }
    console.log(this.$route)
  },
  data () {
    return {
      loading: false,
      finished: false,
      articles: [], // 文章列表
      refreshing: false // 列表是否开始刷新 -> true显示loading | 关闭loading
    }
  },
  methods: {
    async onLoad () {
      console.log('loading的状态', this.loading)
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data } = await searchArticleApi(this.query)
      console.log('获取到的数据', data)
      try {
        this.articles.push(...data.results)
      } catch (error) {
        console.dir(error)
      }

      // 加载状态结束
      this.loading = false
      // 关闭刷新loading
      this.refreshing = false

      // 数据全部加载完成
      if (data.total_count === this.articles.length) {
        this.finished = true
      } else {
        this.query.page++
      }
    },
    onRefresh () {
      // 清空列表数据
      if (this.freshing) {
        this.articles = []
      }

      // 重置列表是否结束的状态
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding-top: 46px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      height: 180px;
      width: 100%;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    span {
      padding-right: 10px;
    }
  }
}
</style>
